<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>无标题文档</title>
<style>
	input{
		margin-bottom: 30px;
		padding-bottom: 10px;
		padding-top: 10px;
		padding-right: 80px;
		padding-left: 5px;
	}
</style>
<script type="text/javascript"> 
 function checkForm(){ 
  var nametip = checkUserName(); 
  var passtip = checkPassword();  
  
  var phonetip = checkPhone(); 
  return nametip && passtip  && phonetip; 
  } 
  //验证用户名   
  function checkUserName(){ 
  var username = document.getElementById('userName'); 
  var errname = document.getElementById('nameErr'); 
  var pattern = /^\w{6,20}$/;  
  if(username.value.length == 0){ 
    errname.innerHTML="用户名不能为空"
    errname.className="error"
    return false; 
    } 
  if(!pattern.test(username.value)){ 
    errname.innerHTML="用户名不合规范"
    errname.className="error"
    return false; 
    } 
   else{ 
     errname.innerHTML="OK"
     errname.className="success"; 
     return true; 
     } 
  } 
  //验证密码   
function checkPassword(){ 
  var userpasswd = document.getElementById('userPasword'); 
  var errPasswd = document.getElementById('passwordErr'); 
  var pattern = /^\w{6,}$/; 
  if(!pattern.test(userpasswd.value)){ 
    errPasswd.innerHTML="密码不合规范"
    errPasswd.className="error"
    return false; 
    } 
   else{ 
     errPasswd.innerHTML="OK"
     errPasswd.className="success"; 
     return true; 
     } 
  } 
  //验证码
 
  
//验证手机号 
  function checkPhone(){ 
  var userphone = document.getElementById('userPhone'); 
  var phonrErr = document.getElementById('phoneErr'); 
  var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式 
  if(!pattern.test(userphone.value)){ 
    phonrErr.innerHTML="手机号码不合规范"
    phonrErr.className="error"
    return false; 
    } 
   else{ 
     phonrErr.innerHTML="OK"
     phonrErr.className="success"; 
     return true; 
     } 
  } 
</script>

</head>
<body>
   <div id="contents">  
   <hr width="95%" color="#f2f2f2"/> 
   <form action="#" onSubmit="return checkForm()"> 
    <div id="form-itemGroup">      
      <input type="text" id="userName" class="userName" onBlur="checkUserName()" oninput="checkUserName()" placeholder="用户名(至少6到20位字符)"> 
      <span class="default" id="nameErr"></span> 
    </div> 
    <div id="form-itemGroup"> 
      
      <input type="password" id="userPasword" class="userName" onBlur="checkPassword()" oninput="checkPassword()" placeholder="密码"> 
      <span class="default" id="passwordErr"></span> 
    </div>  
    <div id="form-itemGroup">       
      <input type="text" id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()" placeholder="手机号"> 
      <span class="default" id="phoneErr"></span> 
    </div> 
	
    <div> 
	<input type="text" placeholder="验证码" />
     <button type="submit" class="divBtn">获取验证码</button> 
    </div> 
	<div>
		<input type="checkbox" />我以阅读并接受<span style="color: red;">《聚合用户服务协议》</span>
	</div>
	<div>
		<button style="background-color: blue; padding-top: 10px;padding-bottom: 10px;padding-left: 50px;padding-right:50px ;">立即注册</button>
	</div>
   </form> 
   
 </div>

</body>
</html>
